<template>
  <div class="couponListWraper">

    <div class="couponListTop">
      <div class="top">
        <p><img src="http://static.52letsgo.cn/zz/wechatimg/ic_problem.png" alt="" v-link="{path: '/useDes'}"><span v-link="{path: '/useDes'}">使用优惠券说明</span></p>
      </div>
    </div>


    <!--<div class="couponList" v-show="showUnActiveStatus">
      <div class="item"v-for="(index, item) in UCouponList">
        <img src="http://static.52letsgo.cn/zz/wechatimg/bg_coupon.png" alt="" >
        <div class="use-rule" @click="showRuleU(index)">
          <span>使用规则</span>
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_arrow_right_gray.png" v-show="item.showRuleStatus" alt="">
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_arrow_down_gray.png" v-show="!item.showRuleStatus" alt="">
        </div>
        <div class="item-header" >
          <div class="left">
            <p class="left-t">￥<span>{{item.value}}</span></p>
            <p class='left-b'>满{{item.conditions}}可用</p>
          </div>
          <div class="right">
            <p class="right-t">{{item.name}}</p>
            <p class='right-b'>{{item.bettwenTime}}</p>
          </div>
        </div>
        <div class="item-bottom" v-show="item.showRuleStatus">
           <p v-for="rule in item.detailRule">{{rule}}</p>
        </div>
      </div>
    </div>-->
    <div class="uCouponListMiddle" v-show="loadStatus">
      
       <scroller v-show="!showNoData" height="100%" v-ref:scroller :pulldown-config="pulldownConfig" :pullup-config="pullupConfig" @pullup:loading="loadMore"
                @pulldown:loading="refresh" lock-x use-pullup use-pulldown>
       <!--<scroller v-if="!usePullUp" height="100%" v-ref:scroller :pulldown-config="pulldownConfig"
                @pulldown:loading="refresh" lock-x use-pulldown>-->
      <div class="couponList couponListActive" v-show="showActiveStatus">
        <div class="item" v-for="(index, item) in couponList">
          <img src="http://static.52letsgo.cn/zz/wechatimg/bg_coupon_useless.png" alt="" >
          <div class="use-rule" @click="showRuleA(index)">
            <span>使用规则</span>
            <img src="http://static.52letsgo.cn/zz/wechatimg/ic_arrow_right_gray.png" v-show="!item.showRuleStatus" alt="">
            <img src="http://static.52letsgo.cn/zz/wechatimg/ic_arrow_down_gray.png" v-show="item.showRuleStatus" alt="">
          </div>
          <div class="item-header">
            <div class="left">
              <p class="left-t">￥<span>{{item.value}}</span></p>
              <p class='left-b'>满{{item.conditions}}可用</p>
            </div>
            <div class="right">
              <p class="right-t">{{item.name}}</p>
              <p class='right-b'>{{item.bettwenTime}}</p>
            </div>
          </div>
          <div class="item-bottom" v-show="item.showRuleStatus">
            <p v-for="rule in item.detailRule">{{rule}}</p>
          </div>
        </div>
        <p class="noData" v-show="isLast">暂无更多数据</p>
      </div>
      </scroller>
      <div class="noneCoupon" v-show="showNoData">
        <img src="http://static.52letsgo.cn/zz/wechatimg/bg_no_data.png" alt="">
      </div>

    </div>

  </div>
</template>
<script>
  import { Scroller, LoadMore } from '../../components'
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  var CartUtils = require('./../../commons/js/Cart');
  export default {
    data () {
      return {
        userInfo: LocalStorageUtil.getItem('User'),
        showNoData: false,
        loadStatus: false,
        showActiveStatus: true,
        cartPrice: CartUtils.getTotalPrice(),
        pageCount: 8,
        page: 1,
        couponList: [],
        isLast: false,
        usePullUp: true,
        pulldownConfig: {
          content: '下拉刷新',
          autoRefresh: false,
          height: 30,
          downContent: '下拉刷新',
          upContent: '释放刷新',
          loadingContent: '加载中',
          clsPrefix: 'xs-plugin-pullup-'
        },
        pullupConfig: {
          content: '请上拉刷新数据',
          autoRefresh: false,
          height: 30,
          downContent: '请上拉刷新数据',
          upContent: '请上拉刷新数据',
          loadingContent: '加载中...',
          clsPrefix: 'xs-plugin-pullup-'
        }
      }
    },
    components: {
      Scroller,
      LoadMore 
    },
    methods: {
      showRuleA (index) {
        this.couponList[index].showRuleStatus = !this.couponList  [index].showRuleStatus
      },
      showUCouponLsit () {
        if(this.uCouponList.length == 0) {
          Global.showToast("暂无过期优惠卷", this)
        } else {
          this.$router.go({path: '/uCouponList'})
        }
      },
      loadMore (uuid) {
        console.log("loadMore")
        var self = this
        if(self.isLast) {
          self.$nextTick(() => {
            self.$broadcast('pullup:reset', uuid)
            self.$refs.scroller.reset()
          })
          self.$broadcast('pullup:disable', uuid)
        } else {
           var data = {
            userId: this.userInfo.id,
            begin: (this.page - 1) * this.pageCount,
            end: this.pageCount
          }
          MyRequest.MyGetWithToast("timeOutCoupon", this, function(result, that) {
            console.log(result)
            for(var i = 0; i < result.data.length; i ++) {
              result.data[i].showRuleStatus = false
              result.data[i].detailRule =  result.data[i].rule.split("|")
            }
            that.couponList.push.apply(that.couponList, result.data)
            that.loadStatus = true
            that.$nextTick(() => {
              that.$broadcast('pullup:reset', uuid)
              that.$refs.scroller.reset()
            })
            if(that.couponList.length < that.page * that.pageCount) {
              that.usePullUp = false
              that.isLast = true
              that.$broadcast('pullup:disable', uuid)
            }
            that.page ++
            Global.closeLoading ()
            
          }, data)
        }
      },
      refresh (uuid) {
        console.log("refresh")
        this.page = 1
        var data = {
          userId: this.userInfo.id,
          begin: (this.page - 1) * this.pageCount,
          end: this.pageCount
        }
        MyRequest.MyGetWithToast("timeOutCoupon", this, function(result, that) {
          console.log(result)
          if(result.success) {
            for(var i = 0; i < result.data.length; i ++) {
              result.data[i].showRuleStatus = false
              result.data[i].detailRule =  result.data[i].rule.split("|")
            }
            that.couponList = result.data
            that.loadStatus = true
            if(that.couponList.length < that.page * that.pageCount) {
              that.isLast = true
            } else {
              that.isLast = false
              that.$broadcast('pullup:enable', uuid)
              that.$nextTick(() => {
                that.$broadcast('pullup:reset', uuid)
                that.$refs.scroller.reset()
              })
            }
            that.$nextTick(() => {
              that.$broadcast('pulldown:reset', uuid)
              that.$refs.scroller.reset()
            })
            that.page ++
          } else {
            Global.showToast(result.msg, that)
          }
          Global.closeLoading()
        }, data)
      }
    },
    ready: function() {
      var data = {
        userId: this.userInfo.id,
        begin: (this.page - 1) * this.pageCount,
        end: this.pageCount
      }
      MyRequest.MyGetWithToast("timeOutCoupon", this, function(result, that) {
        if(result.success) {
          for(var i = 0; i < result.data.length; i ++) {
            result.data[i].showRuleStatus = false
            result.data[i].detailRule =  result.data[i].rule.split("|")
          }
          if(result.data.length == 0) {
            that.showNoData = true
          }
          that.couponList = result.data
          that.loadStatus = true
          that.page ++
        } else {
          Global.showToast(result.msg, that)
        }
        that.$refs.scroller.reset()
        Global.closeLoading()
      }, data)
    }
  }
</script>
<style  lang="less">
    @import './couponList.less';
</style>
